import React, { useState } from "react";
import { Card, Tabs, List, Avatar, Tag, Button } from "antd";
import type { ConsultSession } from "../../types/consult";
import { useNavigate } from "react-router-dom";
import Layout from "../../components/Layout";

const allSessions: ConsultSession[] = [
  {
    id: "s1",
    patient: { id: "p1", name: "张三", type: "patient" },
    doctor: { id: "doc1", name: "王医生", type: "doctor" },
    status: '进行中',
    lastMessage: { id: "m1", sessionId: "s1", senderId: "p1", senderType: "patient", type: "text", content: "膝盖疼", sendTime: "2024-06-07 10:14" },
    messages: [],
    createdAt: "2024-06-07 09:00",
    updatedAt: "2024-06-07 10:14",
  },
  {
    id: "s2",
    patient: { id: "p2", name: "李四", type: "patient" },
    doctor: { id: "doc1", name: "王医生", type: "doctor" },
    status: '已结束',
    lastMessage: { id: "m2", sessionId: "s2", senderId: "doc1", senderType: "doctor", type: "text", content: "按时服药即可", sendTime: "2024-05-28 19:12" },
    messages: [],
    createdAt: "2024-05-28 18:50",
    updatedAt: "2024-05-28 19:12",
  },
];

const ConsultManager: React.FC = () => {
  const [tab, setTab] = useState<'进行中'|'已结束'>('进行中');
  const navigate = useNavigate();
  const filtered = allSessions.filter(s => s.status === tab);
  return (
    <Layout title="在线咨询管理">
      <Card style={{maxWidth: 780, margin:'0 auto'}}>
      <Tabs activeKey={tab} onChange={k=>setTab(k as any)} items={[{key:'进行中',label:'进行中'},{key:'已结束',label:'已结束'}]} />
      <List
        itemLayout="horizontal"
        dataSource={filtered}
        renderItem={item => (
          <List.Item actions={[<Button type="link" onClick={()=>navigate(`/doctor/consult/${item.id}`)}>进入对话</Button>]}
          >
            <List.Item.Meta
              avatar={<Avatar>{item.patient.name[0]}</Avatar>}
              title={<>{item.patient.name} <Tag color={tab==="进行中"?'green':'default'}>{item.status}</Tag></>}
              description={<span>最新消息：{item.lastMessage?.content} <span style={{marginLeft:10}}>{item.updatedAt}</span></span>}
            />
          </List.Item>
        )}
      />
      </Card>
    </Layout>
  );
};
export default ConsultManager;
